<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>message</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../css/mui.min.css" rel="stylesheet" />
		<script src="../../js/mui.min.js"></script>
		<style>
		.circle { 
                position: fixed; 
                text-align: center; 
                margin-right: calc((20% - 65px)/2); 
                right: 0;
                bottom: 18px; 
                width: 65px; 
                height: 65px;
                padding:20px;                
                border-radius: 50px; 
                background: rgba(100, 177, 245, 0.8); 
                z-index: 99; 
        } 
			
			
		</style>
		
	</head>  

	<body>
		<div class="circle" id="addBtn">
			<span class="mui-icon mui-icon-plusempty"></span>
		</div>
		<div id="refreshContainer" class="mui-content mui-scroll-wrapper">
		  <div class="mui-scroll">
				<!--数据列表-->
				<ul class="mui-table-view mui-table-view-chevron">
					<li class="mui-table-view-cell">
						<a href="" class="mui-navigate-right">Item 1</a>
					</li>
					<li class="mui-table-view-cell">
						<a href="" class="mui-navigate-right">Item 2</a>
					</li>
					<li class="mui-table-view-cell">
						<a href="" class="mui-navigate-right">Item 3</a>
					</li>
					<li class="mui-table-view-cell">
						<a href="" class="mui-navigate-right">Item 4</a>
					</li>
					<li class="mui-table-view-cell">
						<a href="" class="mui-navigate-right">Item 5</a>
					</li>
				</ul>
			</div>
		</div>
		<script type="text/javascript">
				window.addEventListener('refresh', function() {
					console.log('receive refresh');
				}, false);
				
				mui.init({
				  pullRefresh : {
				    container:"#refreshContainer",//下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
				    down : {
				      height:50,//可选,默认50.触发下拉刷新拖动距离,
				      auto: true,//可选,默认false.自动下拉刷新一次
				      contentdown : "下拉可以刷新",//可选，在下拉可刷新状态时，下拉刷新控件上显示的标题内容
				      contentover : "释放立即刷新",//可选，在释放可刷新状态时，下拉刷新控件上显示的标题内容
				      contentrefresh : "正在刷新...",//可选，正在刷新状态时，下拉刷新控件上显示的标题内容
				      callback :endPulldownToRefresh //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
				    },
				    up: {
						contentrefresh: '正在加载...',
						callback: pullupRefresh
					}
				  }
				});
				
				function endPulldownToRefresh(){
					mui('#refreshContainer').pullRefresh().endPulldownToRefresh();
				}
				
				
				var count = 0;
			/**
			 * 上拉加载具体业务实现
			 */
			function pullupRefresh() {
				setTimeout(function() {
					mui('#refreshContainer').pullRefresh().endPullupToRefresh((++count > 2)); //参数为true代表没有更多数据了。
					var table = document.body.querySelector('.mui-table-view');
					var cells = document.body.querySelectorAll('.mui-table-view-cell');
					for (var i = cells.length, len = i + 5; i < len; i++) {
						var li = document.createElement('li');
						li.className = 'mui-table-view-cell';
						li.innerHTML = '<a class="mui-navigate-right">Item ' + (i + 1) + '</a>';
						table.appendChild(li);
					}
				}, 1500);
			}
			
			
			window.addEventListener('refresh', function() {
					console.log('receive refresh');
				}, false);
				
				
				
				
				
				mui('#addBtn').on('tap','.mui-icon', function(e) {
						mui.openWindow({
								url:"/html/case/add.html",
								id:"/html/case/add.html",
								createNew:true,
								show: {
									aniShow: 'pop-in'
								},
								waiting: {
									autoShow: false
								}
								
								
							});
				});
				
				
		</script>
	</body>

</html>    